
import { ref, onMounted } from 'vue'
import { findBanner } from '@/api/home'

import { useCountDown } from '@/hooks'
import schema from '@/utils/vee-validate-schema'
import { message } from '@/components/Message'

/**
 * 全局可复用的钩子函数（页面业务相关）
 * 抽离公共的轮播图组件
 */
export function useBanner () {
  const slidersData = ref([])

  // 获取轮播图片数据
  const getSlidersData = async () => {
    const { result } = await findBanner()
    // console.log(res)
    slidersData.value = result
  }
  // 在更新时候获取图片列表
  onMounted(() => {
    getSlidersData()
  })

  return { slidersData }
}

// 发送验证码
/**
 *
 * @param {*} formData 表单数据（手机号）
 * @param {*} sendApi 发送验证码后台接口
 * @returns
 */
export const useSendCode = (formData, sendApi) => {
  // 获取表单组件实例
  const fm = ref()
  // 使用倒计时函数
  const { count, start } = useCountDown(60)
  /**
   * 思路：
  1. 准备倒计时hook和**点击**发验证码的方法
  2. 发送要校验手机号格式
  3. 通过校验同时不是倒计时状态，才进行发送=》60s内不能重复发送
   */

  // 点击事件
  const handlerCode = async () => {
    // validate 通过true | 不通过是错误信息字符
    const validate = schema.mobile(formData.mobile)
    if (validate === true) {
      // 是正确的手机号才能发送验证码
      // console.log('是否正确的手机号才能发送验证码')
      // 判断是否发送中？=》count === 0 没有发送  | count !== 0  正在发送
      if (count.value === 0) {
        try {
          await sendApi(formData.mobile)
          message({ type: 'success', text: '发送成功！' })
          // 发送请求，开始倒计时
          start()
        } catch (error) {
          message({ type: 'success', text: error.response.data.message })
        }
      }
    } else {
      // 手机号格式错=>js触发错误信息的显示
      fm.value.setFieldError('mobile', validate)
    }
  }

  return { handlerCode, fm, count }
}
